<form  clrForm clrLayout="horizontal">
    <clr-select-container clr-col-md-12>
        <label>{{'APP_MONITOR_NODE'|translate}}</label>
        <select clrSelect class="clr-select" name="label" (change)="load()" [(ngModel)]="selectNode">
            <option *ngFor="let item of nodes" [value]="item">{{item}}</option>
        </select>
    </clr-select-container>

    <clr-input-container clr-col-md-12>
        <label>{{'APP_SEARCH_BEGIN_DATE'|translate}}</label>
        <input class="myDateInput" (change)="load()" clrInput type="datetime-local" name="searchBeginDate" [(ngModel)]="searchBeginDate">
    </clr-input-container>
    <clr-input-container clr-col-md-12>
        <label>{{'APP_SEARCH_END_DATE'|translate}}</label>
        <input class="myDateInput" (change)="load()" clrInput type="datetime-local" name="searchEndDate" [(ngModel)]="searchEndDate">
    </clr-input-container>
</form>

<div class="clr-row">
    <div class="clr-col-lg-6 clr-col-12">
        <div class="card">
            <div id="cpuChart" style="width: 100%;height: 350%;margin-top: 40px;"></div>
        </div>
    </div>
    <div class="clr-col-lg-6 clr-col-12">
        <div class="card">
            <div id="memeryChart" style="width: 100%;height: 350%;margin-top: 40px;"></div>
        </div>
    </div>
</div>
<div class="clr-row">
    <div class="clr-col-lg-6 clr-col-12">
        <div class="card">
            <div id="diskChart" style="width: 100%;height:350%;margin-top: 40px;"></div>
        </div>
    </div>
    <div class="clr-col-lg-6 clr-col-12">
        <div class="card">
            <div id="networkChart" style="width: 100%;height:350%;margin-top: 40px;"></div>
        </div>
    </div>
</div>
